import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { useRequest } from '@umijs/hooks';
import React, { useState, useRef, useCallback, useEffect } from 'react';

import { Modal,Row, Col, Button, Checkbox, message} from 'antd';
import { queryCityInfo,exportCostbookdetail } from '../service';

import styles from './index.less';
import moment from 'moment';

const CustomExportData = props => {
  const { customExportModalVisible, onCancel, columns, searchParams } = props;

  const [btnLoading, handleBtnLoading] = useState(false)
  const [checkedList, handleCheckedList] = useState([])

  let listData = []
  columns.forEach(item => {
    if (!item.hideInTable) {
      listData.push(item.dataIndex)
    }
  })
  useEffect(()=>{
    checkedGroup('1')
  },[customExportModalVisible])


  const checkedGroup = (flag) => {
    if (flag === '1'){
      handleCheckedList(listData)
    } else if (flag === '2'){
      handleCheckedList([])
    }
  }

  const sure = () => {
    if (checkedList.length === 0) {
      message.error('您未选择任何字段')
      return false
    } else {
      handleBtnLoading(true)
      const hide = message.loading('正在导出');
      let res = exportCostbookdetail({...searchParams,columnFiledNames: checkedList}).then(res=>{
        let blob = new Blob([res], {
          type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        let elink = document.createElement('a')
       let time=moment(Date.now()).format('YYYY-MM-DD HH_mm_ss')
        elink.download = '不正常航班成本分析报表列表'+time+'.xls'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
        hide();
        message.success('导出成功');
        handleBtnLoading(false)
        handleCheckedList([])
        onCancel()
      }).catch(err => {
        handleBtnLoading(false)
        console.log(err)
      });
    }
  }
  return (
    <Modal
      destroyOnClose={true}
      title="自定义导出"
      visible={customExportModalVisible}
      onCancel={() => onCancel()}
      className={styles.customExportModal}
      width={700}
      centered={true}
      footer={null}
    >
      <div className={styles.formTitle}>提示：选中字段点击【确认】后将进行下载，未选择字段不做下载。</div>
      <div className={styles.checkTitle}>
        <Button onClick={()=>{checkedGroup('1')}} type={checkedList.length===listData.length? 'primary' :'default'}>全选</Button>
        <Button onClick={()=>{checkedGroup('2')}} type={checkedList.length===0 ? 'primary' : 'default' }>全不选</Button>
      </div>
      <Checkbox.Group className={styles.checkboxItem} value={checkedList} onChange={(value)=>{
        handleCheckedList(value)
      }}>
        {
          columns.map(item => {
            return item.hideInTable === true
              ? '' 
              : <Checkbox value={item.dataIndex} key={item.dataIndex}>{item.title}</Checkbox>
          })
        }
      </Checkbox.Group>
      <div style={{textAlign: 'center', padding: '20px 0'}}>
        <Button type='primary' loading={btnLoading} onClick={()=>sure()}>确定</Button>
        <Button style={{marginLeft: '20px'}} type='default' loading={btnLoading} onClick={onCancel}>取消</Button>
      </div>
    </Modal>
  )
}

export default CustomExportData